<template>
  <div>
    <div class="flex-box-container">
      <el-button type="primary" size="small" style="width: 100px;display: inline-block;">
        <a @touchstart="clear" @mousedown="clear" style="width:100%;color: #fff">清屏</a>
      </el-button>
      <!--<el-button type="primary" size="small" style="width: 100px;display: inline-block;">-->
        <!--<a @touchstart="download" @mousedown="download" style="width:100%;color: #fff">下载签名</a>-->
      <!--</el-button>-->
      <el-button size="small" type="primary" style="margin-left: 10px;" @click="upload">点击上传签名</el-button>
    </div>
    <div id="canvasBox" :style="getHorizontalStyle">
      <div style="border: 1px solid #ccc;height: 300px;margin-top: 20px;">
        <canvas style="width: 100%;height: 300px;"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import Draw from '../../utils/draw';
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");

export default {
  name: 'canvas',
  data() {
    return {
      url: "",
      msg: 'Just use canvas to draw',
      degree: 0, // 屏幕整体旋转的角度, 可取 -90,90,180等值
      scope: [
        {
          value: 0,
          title: '正常',
        },
        {
          value: 90,
          title: '顺时针旋转90°',
        },
        {
          value: 180,
          title: '顺时针旋转180°',
        },
        {
          value: -90,
          title: '逆时针旋转90°',
        },
      ],
    };
  },
  props: ['signKey'],
  components: {
    Draw,
  },
  created() {
  },
  mounted() {
    this.canvasBox = document.getElementById('canvasBox');
    this.initCanvas();
  },
  computed: {
    getHorizontalStyle() {
      const d = document;
//      const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
//      const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
      const w = 600;
      const h = 320;
      let length = (h - w) / 2;
      let width = w;
      let height = h;

      switch (this.degree) {
        case -90:
          length = -length;
        case 90:
          width = h;
          height = w;
          break;
        default:
          length = 0;
      }
      if (this.canvasBox) {
        this.canvasBox.removeChild(document.querySelector('canvas'));
        this.canvasBox.appendChild(document.createElement('canvas'));
        setTimeout(() => {
          this.initCanvas();
        }, 200);
      }
      return {
        transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
        width: `${width}px`,
        height: `${height}px`,
        transformOrigin: 'center center',
      };
    },
  },
  methods: {
    initCanvas() {
      const canvas = document.querySelector('canvas');
      this.draw = new Draw(canvas, -this.degree);
    },
    clear() {
      this.draw.clear();
    },
    download() {
      this.draw.downloadPNGImage(this.draw.getPNGImage());
    },
    upload() {
      const url = CONSTANT.URL.COMMON.UPLOAD;
      const image = this.draw.getPNGImage();
      const file = this.draw.dataURLtoFile(image)
      let param = {
        suffix: "jpg",   // 文件后缀  png
        contentType: file.type             // 文件类型  image/png
      }
      common.requestAjax(url,param,null,(res)=> {
        this.upLoadUrl = res.data.bussData.uploadUrl;
        this.signKey = res.data.bussData.fileKey;
        this.$emit("getSignKey", this.signKey)
        let downloadUrl = res.data.bussData.downloadUrl;
        common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
          this.$message({
            type: "success",
            message: "上传成功"
          })
        })
      });
    },
  },
};


</script>

<style>
#canvasBox {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.greet {
  padding: 20px;
  font-size: 20px;
  user-select: none;
}
.greet a {
  cursor: pointer;
}
.greet select {
  font-size: 18px;
}
canvas {
  flex: 1;
  cursor: crosshair;
}
</style>
